import { Component, OnInit } from '@angular/core';
import { NavController, ModalController, ActionSheetController } from '@ionic/angular';
import { UserInfoModal } from '@modals/user-info/user-info';
import { PicUploadService } from '@services/picUpload.service';
import { ChangePhoneModal } from '@modals/user-info/change-phone/change-phone';
import { CacheService } from '@services/cache.service';
import { DataService } from '@services/data.service';
import { FileUploadOptions } from '@ionic-native/file-transfer';
import { MyNoteService } from '@services/myNote.service';
import { Router } from '@angular/router';


@Component({
    selector: 'person-info',
    templateUrl: 'person-info.html',
    styleUrls: ['person-info.scss']
})

export class PersonInfoPage implements OnInit {
    person = {
        UserName: '',
        Password: '',
        Phone: '',
        EMail: '',
        headStyle: {
            'background-image': 'url("assets/imgs/default.png")'
        },
    };


    constructor(
        public navCtrl: NavController,
        public modalCtrl: ModalController,
        public actionSheetCtrl: ActionSheetController,
        private picService: PicUploadService,
        public dataService: DataService,
        public cache: CacheService,
        private myNote: MyNoteService,
        private picUploadService: PicUploadService,
        private router: Router
    ) {
    }

    ngOnInit() {

    }

    ionViewWillEnter() {
        this.person.UserName = this.cache.userinfo.userName;
        this.person.Phone = this.cache.userinfo.phone;
        this.person.EMail = this.cache.userinfo.EMail;
        this.setHeadImg();
    }

    setHeadImg() {
        this.picUploadService.getAvatar().subscribe(imgdata => {
            this.person.headStyle = { 'background-image': 'url(' + imgdata.url + ')' };
        });
    }

    async update(index) {
        if (index === 1) {
            this.takePhoto();
        } else {
            let modal1 = null;
            if (index === 4) {      // 创建新的页面——ChangePhoneModalPage
                modal1 = await this.modalCtrl.create({
                    component: ChangePhoneModal,
                });
            }
            const datas = {
                index: index,
                value: {
                    UserName: this.person.UserName,
                    Phone: this.person.Phone,
                    Password: this.person.Password,
                    EMail: this.person.EMail
                },
                modalNext: modal1
            };
            const modal = await this.modalCtrl.create({
                component: UserInfoModal,
                componentProps: { datas: datas }
            });
            modal.present();
            const data = await modal.onDidDismiss();
            if (index === 4) {
                const val = await modal1.onDidDismiss();
                console.log(val);
                if (val.data) {
                    this.person.Phone = val.data;
                    this.cache.userinfo.phone = val.data;
                }
            }

            if (data.data) {
                if (data.data.InfoType === 0) {
                    this.person.UserName = data.data.value;
                } else if (data.data.InfoType === 1) {
                    this.person.Password = data.data.value;
                } else if (data.data.InfoType === 3) {
                    this.person.EMail = data.data.value;
                }
            }

        }
    }

    async takePhoto() {
        const actionSheet = await this.actionSheetCtrl.create({
            header: '更换头像',
            cssClass: 'take-photo',
            buttons: [
                {
                    text: '拍照',
                    role: 'destructive',
                    handler: () => {
                        this.picService.GetPic(0).then((imgUrlCam) => {
                            this.uploadImg(imgUrlCam);
                        });
                    }
                }, {
                    text: '从相册选择',
                    role: 'destructive',
                    handler: () => {
                        this.picService.GetPic(1).then((imgUrlLib) => {
                            this.uploadImg(imgUrlLib);
                        });
                    }
                }, {
                    text: '取消',
                    role: 'cancel',
                    handler: () => {
                        console.log('Cancel clicked');
                    }
                }
            ]
        });
        actionSheet.present();
    }

    // 头像上传
    uploadImg(imgUrl) {
        this.cache.clientToken.subscribe(data => {
            const token = data;
            const options: FileUploadOptions = {
                params: {
                    type: 'userAvatar',
                    token: token
                },
            };
            this.picUploadService.upload(imgUrl, options).subscribe(res => {
                console.log('上传返回信息', res);
                const ip = res.ip;
                const apiUrl = res.data.response.substring(1, res.data.response.length - 1);
                this.dataService.UpdateImg(apiUrl).subscribe(result => {
                    console.log(result);
                    if (result) {
                        this.myNote.MyNotice('图片上传成功', 1500, null, 'alert-note');
                        this.cache.userinfo.avatar = ip + apiUrl;
                        this.setHeadImg();
                    } else {
                        this.myNote.MyNotice('图片上传失败', 1500, null, 'alert-note');
                    }
                });
            });
        });
    }

}
